<template>
  <div>
    <div class="top-panel__box">
      <el-form :inline="true" :model="searchForm" size="small" ref="searchForm">
        <el-form-item prop="freeCondition">
          <el-input placeholder="请输入姓名/工号/机构搜索管理员" v-model="searchForm.freeCondition2" clearable>
            <el-button slot="append" type="primary" icon="el-icon-search" @click="getList(1)"></el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="success" size="mini" @click="submit" class="submit" plain>添加</el-button>
    <div class="DistBox">
      <el-row class="userSearchModule">
        <el-row class="table-top">
          <pagination :pageNum.sync="searchForm.pageNum" :curSizes.sync="searchForm.pageSize" :pageSizes="[10]" :total="usertotal" @getList="getList" />
        </el-row>
        <el-table :row-key="getRowKey" @row-click="rowClick" :data="userSearchList" class="tc-table" size="small" ref="multipleTable" @selection-change="userSelectionChange">
          <el-table-column type="selection" width="60" fixed="left" :selectable="selectable"></el-table-column>
          <template v-for="(column, index) in USER_LIST_THEAD">
            <el-table-column :prop="column.prop" :label="column.label" :formatter="column.formatter" :key="index" :show-overflow-tooltip="true">
            </el-table-column>
          </template>
        </el-table>
      </el-row>
      <el-row class="userDistModule">
        <el-row class="table-top">
          <pagination :pageNum.sync="userInForm.pageNum" :curSizes.sync="userInForm.pageSize" :total="showUserInList.length" />
        </el-row>
        <el-table :data="showUserInList.slice((userInForm.pageNum-1)*userInForm.pageSize,userInForm.pageNum*userInForm.pageSize)" class="tc-table" size="small">
          <template v-for="(column, index) in USER__IN_LIST_THEAD">
            <el-table-column :prop="column.prop" :label="column.label" :formatter="column.formatter" :key="index" :show-overflow-tooltip="true">
            </el-table-column>
          </template>
          <el-table-column prop="operation" label="操作" class-name="oper-col" :width="85">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" plain @click="onRemoveInUser(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
import { USER_LIST_THEAD, USER__IN_LIST_THEAD } from '../js/contant.js'
import api from '../api'
import { CONSTANT_OBJ } from '@/utils/constant'
export default {
  props: { editData: Object },
  data () {
    return {
      USER_LIST_THEAD,
      USER__IN_LIST_THEAD,
      searchForm: {
        freeCondition: '',
        pageNum: 1,
        pageSize: 10
      },
      usertotal: 0,
      userSearchList: [],
      showUserInList: [],
      labelId: '',
      userInForm: {
        pageNum: 1,
        pageSize: 10
      },
      userSelectionList: []
    }
  },
  mounted () {
    this.getList()
    this.getInList()
  },
  methods: {
    // 获取用户数据
    getList (val) {
      this.searchForm.pageNum = val || this.searchForm.pageNum
      api.postQueryByConditionData(this.searchForm).then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.userSearchList = data.list || []
          this.usertotal = parseInt(data.total) || 0
        }
      }).finally(() => {
      })
    },
    // 获取选中用户数据
    getInList () {
      this.showUserInList = this.editData.userList
      this.labelId = this.editData.labelId
    },
    submit () {
      if (this.userSelectionList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择用户',
          duration: 2000
        })
        return false
      }
      let data = []
      this.showUserInList.forEach(item => {
        data.push(item.userId)
      })
      data = [...this.userSelectionList.map(v => v.userId), ...data]
      this.addUserData({ labelId: this.labelId, userIds: data }, 'add')
    },
    rowClick (row, column, event) {
      console.log(row)
      let temp = [...this.userSelectionList]
      let res = temp.map(ele => ele.userId === row.userId)
      if (res.length > 0) {
        let result = temp.map(ele => ele.userId !== row.userId)
        this.userSelectionList = [...result]
        this.$refs['multipleTable'].toggleRowSelection(row, false)
      } else {
        this.userSelectionList.push(row)
        this.$refs['multipleTable'].toggleRowSelection(row, true)
      }
    },
    addUserData (data, type, row) {
      api.postLabelRelateUserData(data).then(res => {
        const { responseCode } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.toggleLabelUserList(type, row)
          this.userSelectionList = []
          this.$refs.multipleTable.clearSelection()
          this.$emit('getList')
        }
      }).finally(() => {
      })
    },
    toggleLabelUserList (type, row) {
      if (type === 'add') {
        this.showUserInList = [...this.showUserInList, ...this.userSelectionList]
      } else {
        this.showUserInList = this.showUserInList.filter(v => v.userId !== row.userId)
      }
    },
    selectable (row, index) {
      const { userId } = row
      let userIdArr = []
      this.showUserInList.forEach(item => {
        userIdArr.push(item.userId)
      })
      let isInclue = userIdArr.includes(userId)
      return !isInclue
    },
    userSelectionChange (val) {
      this.userSelectionList = []
      val.forEach((value) => {
        this.userSelectionList.push(value)
      })
    },
    // 删除
    onRemoveInUser (row) {
      let userIds = []
      let data = this.showUserInList.filter(item => {
        return item.userId !== row.userId
      })
      data.forEach(item => {
        userIds.push(item.userId)
      })
      this.addUserData({ labelId: this.labelId, userIds: userIds }, 'delete', row)
    },
    userHandleCurrentChange (currentPage) {
      this.userInForm.pageNum = currentPage
    },
    userHandleSizeChange (size) {
      this.userInForm.pageSize = size
    },
    getRowKey (row) {
      return row.userId
    }
  }
}
</script>

<style lang="less" scoped>
.submit {
  width: 100%;
  margin: 16px 0;
}
.distBox {
  position: relative;
  font-size: 0;
}
.table-top {
  margin: 20px 0 10px;
}
.userSearchModule,
.userDistModule {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}

.userSearchModule {
  margin-right: 2%;
}
</style>
